<abp-page [title]="'AbpSettingManagement::Settings' | abpLocalization">
  <div id="SettingManagementWrapper">
    <div class="card">
      <div class="card-body">
        <div class="row">
          <div class="col-12 col-md-3 mb-2 mb-md-0">
            <ul class="nav flex-column nav-pills" id="nav-tab" role="tablist">
              <ng-container *abpFor="let setting of settings; trackBy: trackByFn">
                <li
                  (click)="selected = setting"
                  class="nav-item pointer"
                  *abpPermission="setting.requiredPolicy"
                >
                  <a
                    class="nav-link"
                    [id]="setting.name + '-tab'"
                    role="tab"
                    [class.active]="setting.name === selected.name"
                    >{{ setting.name | abpLocalization }}</a
                  >
                </li>
              </ng-container>
            </ul>
          </div>
          <div class="col-12 col-md-9">
            @if (settings.length) {
              <div class="tab-content">
                <div class="tab-pane fade show active" [id]="selected.name + '-tab'" role="tabpanel">
                  <ng-container *ngComponentOutlet="selected.component"></ng-container>
                </div>
              </div>
            }
          </div>
        </div>
      </div>
    </div>
  </div>
</abp-page>
